<template>
    <el-aside width="240px" class="dashboard-aside">
      <!-- 顶部 Logo -->
      <div class="aside-header">
        <div class="logo">
          <el-icon size="24"><Document /></el-icon>
          <span>协作表格</span>
        </div>
      </div>

      <!-- 文件夹列表 -->
      <div class="folder-section">
        <div class="section-header">
          <span>文件夹</span>
        </div>

        <el-menu
          class="folder-menu"
          :default-active="dashboardStore.activeFolderId"
          @select="dashboardStore.handleFolderClick"
        >
          <el-menu-item
            v-for="item in dashboardStore.defaultMenuItems"
            :key="item.id"
            :index="item.id"
          >
            <el-icon><component :is="item.icon" /></el-icon>
            <template #title>
              <span class="folder-name">{{ item.label }}</span>
              <span class="folder-count">{{
                item.count
              }}</span>
            </template>
          </el-menu-item>
        </el-menu>
      </div>

      <!-- 底部好友列表 -->
      <div class="friends-section">
        <div class="section-header">
          <span>我的好友</span>
          <el-button link @click="dashboardStore.showAddFriend = true">
            <el-icon><Plus /></el-icon>
          </el-button>
        </div>

        <div class="friends-list" v-if="useUserStore.user">
          <div
            v-for="friend in useUserStore.user.friendList"
            :key="friend._id"
            class="friend-item"
          >
          <div class="delete-icon" @click="getDeleteFriend(friend)">
            X
          </div>
            <div class="friend-avatar">
              <el-avatar :size="32" :src="friend.avatar">
                {{useUserStore.user.username}}
              </el-avatar>
            </div>
            <div class="friend-info">
              <span class="friend-name">{{ friend.username }}</span>
            </div>
          </div>
        </div>
      </div>
    </el-aside>
</template>

<script setup lang="ts">
import {watch} from 'vue'
import store from '../stores/module/dashboard'
import userstore from '@/stores/module/user.ts'
import { ElMessage,ElMessageBox } from 'element-plus'
import {delFriend} from '../api/user/index'
import { delFriendType } from '../api/user/type'
const dashboardStore = store()
const useUserStore = userstore()
const startChat = (friend: { id: any; }) => {
  if (!dashboardStore.activeChats.find((chat: { friend: { id: any; }; }) => chat.friend.id === friend.id)) {
    dashboardStore.activeChats.push({
      id: Math.random().toString(36).substr(2, 9),
      friend,
      messages: [],
      draft: "",
    });
  }
};
const getDeleteFriend = async (friend: { _id: delFriendType }) => {
  ElMessageBox.confirm('确定删除好友吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    const res:any = await delFriend({
      userId: JSON.parse(localStorage.getItem('user') as string)._id,
      friendId: friend._id})
    if (res.code === 200) {
      ElMessage.success('删除成功')
      useUserStore.getInfo()
    }
  })
}
</script>

<style scoped>

</style>